<template>
    <div>
      <h2>wangEditor</h2>
      <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
      </div>
      <div>
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
            @click="handleMoused"
        />
        </div>
        <button @click="toSaveArcitle">保存</button>
    </div>
   </template>
   
   <script>
//    import { ref } from 'vue';
//    import wangEditor from 'wangEditor';
   import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
   export default {
    components: { Editor, Toolbar },
    setup() {
      const editor = ref(null);
   
      const toSaveArcitle = () => {
      console.log(editor);
    }

      const initEditor = () => {
        const wangEditorInstance = new wangEditor('editor');
   
        wangEditorInstance.customConfig.debug = true;
        wangEditorInstance.customConfig.pasteFilterStyle = false;
        wangEditorInstance.customConfig.pasteIgnoreImg = true;
   
        wangEditorInstance.customConfig.uploadFileName = 'file';
        wangEditorInstance.customConfig.uploadImgServer = '/fileUpload';
        wangEditorInstance.customConfig.debug = true;
   
        wangEditorInstance.customConfig.uploadImgHooks = {
          before: function (xhr, editor, files) {
            // ...
          },
          success: function (xhr, editor, result) {
            console.log('上传成功');
          },
          fail: function (xhr, editor, result) {
            console.log('上传失败,原因是' + result);
          },
          error: function (xhr, editor) {
            console.log('上传出错');
          },
          timeout: function (xhr, editor) {
            console.log('上传超时');
          },
          customInsert: function (insertImg, result, editor) {
            // ...
            var url = result.url;
            insertImg(url)
          },
        };
   
        wangEditorInstance.create();
        editor.value = wangEditorInstance;
      };
   
      return {
        editor,
        initEditor,
        toSaveArcitle
      };
    },
   };
   </script>
   